<template>
  <div class="home" >

    <div v-if="isHomeShow">
      <!-- 搜索框 -->
         <van-search shape="round" v-model="value" @click="$router.push('/Home/SearchPopup')" placeholder="请输入搜索关键词" />
       <!-- 轮播图 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="lightblue">
           <van-swipe-item v-for="(v,k) in banner" :key="k">
              <img :src="v.image_url" alt="" width="100%">
           </van-swipe-item>
        </van-swipe>
       <!-- 分类导航 -->
         <van-grid :column-num="5">
            <van-grid-item v-for="(v,k) in channel" :key="k" :icon="v.icon_url" :text="v.name" @click="onClick(v.id)"/>
         </van-grid>
        <!-- 品牌制造供应商 -->
           <div class="pinpai">
          <div class="pinpai-top">品牌制造商直供</div>
          <div class="pinpai-content">
            <ul>
              <li v-for="v in brandList" :key="v.id" @click="onBrand(v.id)">
                <img :src="v.app_list_pic_url" alt="">
                <h4>{{v.name}}</h4>
                <p>￥ {{v.floor_price}} 元</p>
              </li>
            </ul>
          </div>
        </div>
        <!-- 新品首发 -->
        <div class="newgoods">
           <div class="newgoods-top">周一到周四·新品首发</div>
              <div class="newgoods-content">
                <van-grid :border="false" :column-num="2" >
                   <van-grid-item v-for="v in newGoodsList" :key="v.id" @click="onClick2(v.id)">
                     <van-image :src="v.list_pic_url" />
                      <div class="desc">{{v.name}}</div>
                      <div class="price">￥ {{v.retail_price}}.00 元</div>
                </van-grid-item>
               </van-grid>
            </div>
         </div>
     
         <!-- 人气推荐商品信息 -->
          <div class="p-hot">
         <div class="h">人气推荐</div> 
         <div class="h-content">
           <ul>
             <li v-for="v in hotGoodsList" :key="v.id">
                <img :src="v.list_pic_url" alt="">
                <p class="p1">{{v.name}}</p>
                <p class="p2">{{v.goods_brief}}</p>
                <p class="p3">￥ {{v.retail_price}}.00 元</p>
             </li>
           </ul>
         </div>
            </div>
         <!--  -->
         <div class="template">
        <div class="template-top">专题精选</div>
        <van-swipe :loop="false" :width="350">
           <van-swipe-item :show-indicators="false" v-for="v in topicList" :key="v.id">
               <img :src="v.item_pic_url" alt="">
               <p style=" font-size:16px;">{{v.title}}</p>
               <p style="white-space:nowrap;text-overflow:ellipsis; font-size:10px;">{{v.subtitle}}</p>
           </van-swipe-item>
        </van-swipe>
         </div>
         <!-- categoryList 分类-->
         <div class="fenlei"  v-for="v in categoryList" :key="v.id">
          <div class="fenlei-top">{{v.name}}</div>
          <div class="fenlei-content">
             <van-grid :border="false" :column-num="2" >
               <van-grid-item v-for="m in v.goodsList" :key="m.id" @click="font()">
                  <van-image :src="m.list_pic_url" />
                      <div class="desc">{{m.name}}</div>
                      <div class="price">￥ {{m.retail_price}}.00 元</div>
               </van-grid-item>
             </van-grid>
          </div>
         </div>
    </div>
       <!-- 搜索占位 -->
       <transition name="slide">
            <router-view></router-view>
       </transition>
  </div>
</template>

<script>
import {GetHomeList} from "@/request/api"
export default {
    data() {
    return {
      value: '',
      banner:[],
      channel:[],
      hotGoodsList:[],
      newGoodsList:[],
      brandList:[],
      categoryList:[],
      topicList:[],
      brand:[],
      isHomeShow:true
    };
  },
  created(){
    // 首页获取
    GetHomeList().then(res=>{
      //  console.log(res);
       let {banner,channel,hotGoodsList,newGoodsList,brandList,categoryList,topicList}=res.data;
       this.banner=banner;
       this.channel=channel;
       this.hotGoodsList=hotGoodsList;
       this.newGoodsList=newGoodsList;
       this.brandList=brandList;
       this.categoryList=categoryList;
       this.topicList=topicList
       
    })
  },
  methods:{
      onBrand(id){
        this.$router.push({
           path:"/brand",
           query:{
               id:id
           }
        })
      },
      onClick(id){
          this.$router.push({
            path:"/channel",
            query:{
               id:id
            }
          })
      },
      onClick2(id1){
          this.$router.push({
             path:'/details',
             query:{
                 id:id1
             }
          })
      },
      font(){
        this.$router.push('/Detail')
      }
  },
  // 监听 router
  watch: {
    $route: {
      handler(url) {
        this.isHomeShow = url.path === '/'
      }
    }
  }
}
</script>
<style lang="less">
  .slide-enter{
    right: -100%;
  }
   
  .slide-enter-active{
    transition: all .5s;
  }
  .slide-enter-to{
    right: 0;
  }

  .slide-leave{
    right: 0;
  }
  .slide-leave-active{
    transition: all .5s;
  }
  .slide-leave-to{
    right: -100%;
  }
   .pinpai{
    width: 100%;
    height: 255px;
    background-color: white;
    margin-top:  1.6rem;
  }
  .pinpai-top{
    font-size: 1.3rem;
    font-family: '宋体';
    text-align: center;
    padding: .5rem;
  }
  .pinpai-content ul{
    margin-top: .50rem;
  }
  .pinpai-content li{
     width: 48%;
     position: relative;
     float: left;
     margin-right: 1%;
     margin-left: 1%;
  }
  .pinpai-content li img{
      width: 100%;
  }
  .pinpai-content li h4{
      font-size:.70rem ;
      position: absolute;
      top:.50rem;
      left: .60rem;
  }
  .pinpai-content li p{
      font-size:.70rem ;
      position: absolute;
      top:2.5rem;
      left: .60rem;
      color:#8B004A ;
  }
  .newgoods{
    width: 100%;
    height: 500px;
    background-color: white;
    margin-top: 1.6rem;
  }
  .newgoods-top{
    font-size: 1.3rem;
    font-family: '宋体';
    text-align: center;
    padding: .5rem;
  }
  .newgoods-content .desc,.fenlei-content .desc{
     font-size:.80rem;
     font-family: '宋体';
  }
  .newgoods-content .price,.fenlei-content .price{
     margin-top: .50rem;
     font-size:.85rem;
     font-family: '宋体';
     color:#8B004A ;
  }
  .p-hot{
    width: 100%;
    height: 303px;
    background: white;
    padding-bottom: 5rem;
    margin-top: 2rem;
    margin-bottom: 1.6rem;
  }
 .p-hot .h{
    font-size: 1.3rem;
    font-family: '宋体';
    text-align: center;
    padding: .5rem;
  }
  .h-content li{
    width: 100%;
    height: 110px;
    background-color: #f8f7f7;
    position: relative;
    margin-bottom: .50rem;
    
  }
  .h-content li img{
     width:25%;
     margin-left: 1rem;
    
  }
  .h-content li .p1{
    color: #333;
    margin-top: 1rem;
    font-size: 1.1rem;
     position: absolute;
     top:0;
     left:7rem
  }
  .h-content li .p2{
    font-size: .18rem;
     margin-top: 1rem;
     position: absolute;
     top:2rem;
     left:7rem
  }
  .h-content li .p3{
     font-size: .18rem;
     position: absolute;
     top:5rem;
     left:7rem;
     color:#8B004A ;
  }
  .fenlei{
     width: 100%;
     background: white;
     padding-bottom: 50px;
  }
  .fenlei-top{
     font-size: 1.3rem;
     font-family: '宋体';
     text-align: center;
     padding: .5rem;
  }
  .fenlei-content .desc{
    //  white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
  }
  .template{
     width: 100%;
    //  height: 2rem;
     background: white;
     margin-bottom:30px ;
  }
  .template .template-top{
    font-size: 1.3rem;
    font-family: '宋体';
     width:100%;
     height: 3rem;
     line-height: 3rem;
     text-align: center;
  }
  .template .van-swipe .van-swipe__track .van-swipe-item p{
     width: 100%;
     height: 1rem;
     line-height: 1rem;
     overflow: hidden;
     margin-top: .5rem;
  }
  .template img{
     width: 100%;
     height: 194px;
  }
  .template .van-swipe__track{
      height: 250px;
  }
</style>
